<template>
  <div class="layout" style="height:100vh;">
    <el-container>
      <el-header class="header">
        <el-row justify="space-between" style="padding-top: 10px;padding-bottom: 10px">
          <!-- 头像 -->
          <img :src="icon" style="width:55px;height:55px;" alt=""/>

          <el-avatar
            :class="'avatar'"
            :src="this.avatar"
            :fit="'cover'"
            :shape="'circle'"
            :size="55"
            @click="avaClick"
          />
        </el-row>
      </el-header>

      <el-container>
        <el-aside>
          <el-menu active-text-color="#FFD466" default-active="3">
            <el-menu-item class="aside" index="1" @click="discoverClick">
              <el-icon :size="25" style="margin-right:10px;"><House /></el-icon>
              <span>发现</span>
            </el-menu-item>
            <el-menu-item class="aside" index="2" @click="adoptClick">
              <el-icon :size="25" style="margin-right:10px;"><Star /></el-icon>
              <span>领养</span>
            </el-menu-item>
            <el-menu-item class="aside" index="3" @click="msgClick">
              <el-icon :size="25" style="margin-right:10px;"><Message /></el-icon>
              
              <span>消息</span>
            </el-menu-item>
            <el-menu-item class="aside" index="4" @click="postClick">
              <el-icon :size="25" style="margin-right:10px;"><CirclePlus /></el-icon>
              <span>发布</span>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <el-container>
          <el-header style="height:40px;">
            <el-menu default-active="1" style="display: flex;justify-content: center;height:40px;" active-text-color="#FFD466" mode="horizontal">
              <el-menu-item class="chose" index="1" style="margin-right:15px" @click="likeClick">
                <el-badge value="new" :offset="[10, -10]" style="position: absolute; right:12%;" class="item" :hidden="!badgeVisible" />
                赞</el-menu-item>
              <el-menu-item class="chose" index="2" style="margin-right:15px" @click="commentClick">评论</el-menu-item>
              <el-menu-item class="chose" index="3" @click="applyClick">领养申请</el-menu-item>
            </el-menu>
          </el-header>

          <el-main class="mainPage">
            <el-row style="justify-content: start; margin-left: 10px; gap: 10px;">
              <!-- 动态渲染 MessBlank_2 -->
              <MessBlank_2
                v-for="(mess, index) in messList"
                :key="index"
                :userName="mess.userName"
                :userAvatar="mess.userAvatar"
                :messageType="mess.messageType"
                :showtitle="mess.showtitle"
                :PassageID="mess.PassageID" 
                :PassageType="mess.PassageType"
              />
            </el-row>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { ref } from 'vue';
import img1 from "/src/assets/avatar.jpg";
import icon from "/src/assets/icon.png";
import MessBlank_2 from './components/MessBlank_2.vue';
import axios from 'axios';

export default {
  name: 'MainPage',
  components: { MessBlank_2 },
  mounted() {
    this.messageCount = 0;
  localStorage.setItem('messageCount', 0);
    this.fetchUserData();
    this.fetchMessages();
  },
  data() {
    return {
      img1,
      avatar: null,
      icon,
      input: ref(''),
      messageType: ref(''),
      UserInfo: ref([]),
      content: ref('hhhhh'),
      showtitle: ref(''),
      messList: [], // 存储动态消息的数组
      hasNewMessages: false, // 是否有新消息
    };
  },

  methods: {
    // 获取用户数据
    fetchUserData() {
      const userData = JSON.parse(sessionStorage.getItem('token'));
      const hasNewMess = JSON.parse(sessionStorage.getItem('hasNewMess'));
      this.hasNewMessages = hasNewMess !== null ? hasNewMess : true;
      this.token = userData.token;
      this.userID = userData.userID;
      axios.defaults.headers.common['Authorization'] = `${this.token}`;

      axios.get('http://localhost:8080/users/' + this.userID)
        .then((result) => {
          this.avatar = result.data.ProfilePhoto;
          console.log('likeAvatar:', this.avatar);
        }).catch((error) => {
          console.log(error);
        });
    },

    // 获取消息数据
    fetchMessages() {
      axios.get(`http://localhost:8080/messages/like/` + this.userID)
        .then((response) => {
          const data = response.data;
          console.log(response.data);

          // 解析后端返回的数据，动态生成 MessBlank_2 的绑定数据
          this.messList = data.map((item) => ({
            userName: item.UserInfo.UName,
            PassageType: item.PassageType,
            PassageID: item.PassageID,
            userAvatar: item.UserInfo.ProfilePhoto || "/src/assets/avatar.jpg",
            messageType: item.Messagetype === 'comment_like' ? '评论' : '文章',
            showtitle: item.Messagetype === 'comment_like'
              ? `${item.Comment.slice(0, 10)}`
              : item.PassageTitle,
          }));

          // 判断是否有新消息
          if (data.length > 0) {
            sessionStorage.setItem('hasNewMess', JSON.stringify(false));
          }
        })
        .catch((error) => {
          console.error("获取消息数据出错:", error);
        });
    },

    // 头像点击
    avaClick() {
      this.$router.push({ path: '/UserPage', query: { id: this.userID } });
    },

    // 点击事件
    discoverClick() {
      this.$router.push({ path: '/MainPage' });
    },
    adoptClick() {
      this.$router.push({ path: '/AdoptPage' });
    },
    msgClick() {
      // 消息点击逻辑
    },
    postClick() {
      this.$router.push({ path: '/PostPage' });
    },
    commentClick() {
      this.$router.push({ path: '/Message/comment' });
    },
    applyClick() {
      this.$router.push({ path: '/Message/apply' });
    }
  }
};
</script>

<style scoped>
.el-menu{
  border:0!important;
}

.chose{
  font-size:18px;
  font-weight:bold;
}
::v-deep(.chose:hover){
  background-color: #FFE9B2!important;
  color:#FFD466!important;
}
.el-menu-item.is-active{
  background-color: white!important;
  color:#FFD466!important;
}

.el-avatar{
  cursor: pointer;
}
.el-menu{
  border:0!important;
}
/*header样式*/
.header{
  /*background-color:black;*/
  height:60px;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  margin-bottom:20px;
}

/*aside*/
.el-aside{
  margin-left: 10px;
  width:180px;
  height:calc(100vh - 70px);
  padding-top:23vh;
}

.aside{
  height:65px;
  font-size:18px;
  font-weight:bold;
  display: flex;
  justify-content: center;
  align-items: center;
}
::v-deep(.aside:hover){
  background-color: #FFE9B2;
}


/*主页面*/
.mainPage{
  height:50vh;
}

</style>


